<template>
  <div id="app">
    <div>
      <span>姓名:</span>
      <input type="text" v-model.trim="name" />
    </div>
    <div>
      <span>年龄:</span>
      <input type="number" v-model.trim.number="age" />
    </div>
    <div>
      <span>性别:</span>
      <select v-model="gender">
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
    </div>
    <div>
      <button @click="add()">添加/修改</button>
    </div>
    <div>
      <table border="1" cellpadding="10" cellspacing="0">
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>操作</th>
        </tr>
        <!-- 动态渲染页面 -->
        <tr v-for="item in people" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.gender }}</td>
          <td>
            <button @click="del(item.id)">删除</button>
            <!-- 点击编辑, 将对应数据作为实参传入编辑事件处理函数 -->
            <button @click="edit(item)">编辑</button>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      people: [{ id: 1, name: "刘德华", age: 18, gender: "男" }],
      id: 0,
      name: "",
      age: 0,
      gender: "男",
      // student: {},
    };
  },
  methods: {
    // 添加修改按钮 - 同时实现添加与修改, 可以通过 id 来进行判断
    // 如果提交的数据带有 id 就代表是进行编辑操作, 如果没有 id 则进行添加操作
    add() {
      // 先判断 变量id 是否有值, 如果没有值, 就代表执行的是添加操作
      if (!this.id) {
        // 添加功能:         
        if (   // 非空判断
          this.name.length === 0 ||
          this.age.length === 0 ||
          this.gender.length === 0
        ) {
          return alert("请输入数据后再提交");
        } else if (this.age <= 0 || this.age >= 120) {
          return alert("请输入正确的年龄 0 ~ 120");
        }
        // 将v-model获取的数据通过对象添加进数组people中, 实时渲染进页面
        this.people.push({
          id: this.people[this.people.length - 1].id + 1,
          name: this.name,
          age: this.age,
          gender: this.gender,
        });
        // 添加完毕重置变量
        this.id = 0;
        this.name = "";
        this.age = 0;
        this.gender = "男";
      } else {
        // 如果 变量id有值 就代表执行的是修改操作
        // 可以利用数组findIndex方法, 通过变量id获取到需要修改的对应数据在数组中的索引号
        // 然后将v-model获取的表单数据 赋值给 数组对象对应的属性, 并在修改完毕后重置变量
        // 这样在下次进行判断时, 如果进行添加操作那么变量id就是初始为0(false)的状态
        const num = this.people.findIndex((item) => item.id === this.id)
        this.people[num].name = this.name
        this.people[num].age = this.age
        this.people[num].gender = this.gender
        // 修改完毕重置变量
        this.id = 0;
        this.name = "";
        this.age = 0;
        this.gender = "男";
      }
    },
    // 删除功能
    del(id) {
      this.people.splice(
        this.people.findIndex((item) => item.id === id),
        1
      );
    },
    // 编辑功能: 数据回显 - 点击编辑按钮, 获取点击的对应数据, 将v-model绑定的变量一一赋值
    // 点击编辑按钮, 将对应数据的id赋值给变量 id, 变量 id 用于在点击 "添加/编辑"按钮 时判断是添加还是编辑
    edit(people) {
      this.id = people.id;
      this.name = people.name;
      this.age = people.age;
      this.gender = people.gender;
    },
  },
};
</script>

<style>
</style>